<template>
	<view class="page">
		<!-- 头部导航 -->
		<view class="header">
			<view class="back" @click="goBack">
				<image src="/static/icons/icon-Get-into@3.png" mode="aspectFit"></image>
			</view>
			<view class="title">评价</view>
		</view>

		<view class="wrapper">
			<!-- 商品信息 -->
			<view class="shop-list">
				<view class="shop-item">
					<image :src="orderInfo.main_img" mode="aspectFill"></image>
					<view class="shop-info">
						<view class="food-name">{{ orderInfo.title }}</view>
						<view class="food-yxq">{{ orderInfo.time }}</view>
						<view class="food-num">
							<text class="num">数量：{{ orderInfo.num }}</text>
							<text>本单分润：<text class="price-red">￥{{ orderInfo.user_rebate_total }}</text></text>
						</view>
						<view class="food-price">
							总价<text class="price-red">￥{{ orderInfo.pay_amount }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价星级 -->
			<view class="rating-section">
				<text class="rating-label">评价</text>
				<view class="star-rating">
					<view 
						v-for="(star, index) in 5" 
						:key="index"
						class="star"
						:class="{ active: index < rating }"
						@click="setRating(index + 1)"
					>
						<image 
							:src="index < rating ? '/static/img/o2o/icon-star(pressed)s@2x.png' : '/static/img/o2o/icon-star(normal)s@2x.png'" 
							mode="aspectFit"
						></image>
					</view>
				</view>
			</view>

			<!-- 评价内容 -->
			<view class="comment-text">
				<textarea 
					v-model="commentContent"
					placeholder="说说它的优点和美中不足的地方呗"
					maxlength="500"
				></textarea>
			</view>

			<!-- 图片上传 -->
			<view class="image-upload">
				<view class="image-list">
					<view 
						v-for="(img, index) in uploadedImages" 
						:key="index"
						class="image-item"
					>
						<image :src="img" mode="aspectFill"></image>
						<view class="delete-btn" @click="deleteImage(index)"></view>
					</view>
					<view v-if="uploadedImages.length < 9" class="upload-btn" @click="chooseImage">
						<image src="/static/img/o2o/icon-sczp@2x.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 匿名评价选项 -->
			<view class="anonymous-option" @click="toggleAnonymous">
				<image 
					:src="isAnonymous ? '/static/img/o2o/icon-select(pressedl)@2x.png' : '/static/img/o2o/icon-select(wxzl)@2x.png'" 
					mode="aspectFit"
				></image>
				<text class="anonymous-text">匿名评价</text>
			</view>

			<!-- 发布按钮 -->
			<view class="submit-btn" @click="submitComment">发布</view>
		</view>
	</view>
</template>

<script>
import { o2oApi } from '@/api/index.js'

export default {
	data() {
		return {
			groupId: '',
			merchId: '',
			orderNum: '',
			orderInfo: {
				title: '',
				main_img: '',
				time: '',
				num: 0,
				user_rebate_total: '0.00',
				pay_amount: '0.00'
			},
			rating: 5,
			commentContent: '',
			uploadedImages: [],
			isAnonymous: false
		}
	},
	
	onLoad(options) {
		this.groupId = options.group_id || ''
		this.merchId = options.merch_id || ''
		this.orderNum = options.order_num || ''
		
		if (this.orderNum) {
			this.getOrderInfo()
		}
	},
	
	methods: {
		// 获取订单信息
		async getOrderInfo() {
			try {
				const res = await o2oApi.getGroupOrderInfo({
					order_num: this.orderNum
				})
				
				if (res.r === 0) {
					const data = res.data
					this.orderInfo = {
						title: data.group.title,
						main_img: data.group.main_img,
						time: data.order.time,
						num: data.order.num,
						user_rebate_total: data.order.user_rebate_total,
						pay_amount: data.order.pay_amount
					}
				}
			} catch (error) {
				console.error('获取订单信息失败:', error)
				uni.showToast({
					title: '获取订单信息失败',
					icon: 'none'
				})
			}
		},
		
		// 设置评分
		setRating(score) {
			this.rating = score
		},
		
		// 选择图片
		chooseImage() {
			const remainingCount = 9 - this.uploadedImages.length
			uni.chooseImage({
				count: remainingCount,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadImages(res.tempFilePaths)
				}
			})
		},
		
		// 上传图片
		async uploadImages(filePaths) {
			uni.showLoading({
				title: '上传中...'
			})
			
			try {
				for (let filePath of filePaths) {
					const uploadRes = await this.uploadSingleImage(filePath)
					if (uploadRes && uploadRes.r === 0) {
						this.uploadedImages.push(uploadRes.data.url)
					}
				}
			} catch (error) {
				console.error('图片上传失败:', error)
				uni.showToast({
					title: '图片上传失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 上传单张图片
		uploadSingleImage(filePath) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: this.$config.baseUrl + 'home/common/upload_img',
					filePath: filePath,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token') || ''
					},
					success: (res) => {
						try {
							const result = JSON.parse(res.data)
							resolve(result)
						} catch (error) {
							reject(error)
						}
					},
					fail: reject
				})
			})
		},
		
		// 删除图片
		deleteImage(index) {
			this.uploadedImages.splice(index, 1)
		},
		
		// 切换匿名状态
		toggleAnonymous() {
			this.isAnonymous = !this.isAnonymous
		},
		
		// 提交评价
		async submitComment() {
			if (!this.commentContent.trim()) {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				})
				return
			}
			
			try {
				uni.showLoading({
					title: '提交中...'
				})
				
				const res = await o2oApi.submitGroupComment({
					imgs: this.uploadedImages.join(','),
					is_anon: this.isAnonymous ? 1 : 0,
					content: this.commentContent,
					score: this.rating,
					order_num: this.orderNum,
					group_id: this.groupId,
					merch_id: this.merchId
				})
				
				if (res.r === 0) {
					uni.showToast({
						title: res.msg || '评价成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg || '评价失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('提交评价失败:', error)
				uni.showToast({
					title: '提交失败，请重试',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background: #eeeeee;
	min-height: 100vh;
}

.header {
	background: #ff1e00;
	height: 88rpx;
	display: flex;
	align-items: center;
	position: relative;
	
	.back {
		position: absolute;
		left: 30rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		flex: 1;
		text-align: center;
		color: white;
		font-size: 36rpx;
		font-weight: 500;
	}
}

.wrapper {
	padding: 0 30rpx;
}

.shop-list {
	background: white;
	border-radius: 12rpx;
	margin-top: 20rpx;
	
	.shop-item {
		display: flex;
		padding: 30rpx;
		
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			margin-right: 30rpx;
		}
		
		.shop-info {
			flex: 1;
			
			.food-name {
				font-size: 30rpx;
				font-weight: 700;
				color: #212121;
				margin-bottom: 10rpx;
			}
			
			.food-yxq {
				font-size: 26rpx;
				color: #6e6e6e;
				margin-bottom: 10rpx;
			}
			
			.food-num {
				font-size: 26rpx;
				color: #6e6e6e;
				margin-bottom: 20rpx;
				
				.num {
					margin-right: 20rpx;
				}
			}
			
			.food-price {
				font-size: 26rpx;
				color: #212121;
			}
		}
	}
}

.price-red {
	color: #ff1e00 !important;
}

.rating-section {
	background: white;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	
	.rating-label {
		font-size: 28rpx;
		color: #212121;
		margin-right: 30rpx;
	}
	
	.star-rating {
		display: flex;
		
		.star {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.comment-text {
	background: white;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
	
	textarea {
		width: 100%;
		height: 170rpx;
		padding: 15rpx 30rpx;
		border: 1px solid #cccccc;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #444444;
		box-sizing: border-box;
	}
}

.image-upload {
	background: white;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		
		.image-item {
			width: 220rpx;
			height: 193rpx;
			margin-right: 19rpx;
			margin-bottom: 15rpx;
			position: relative;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			
			.delete-btn {
				position: absolute;
				top: 0;
				right: 20rpx;
				width: 32rpx;
				height: 32rpx;
				background: url('/static/img/o2o/shanchu@2x.png') no-repeat center;
				background-size: 32rpx 32rpx;
				border-radius: 50%;
			}
		}
		
		.upload-btn {
			width: 220rpx;
			height: 193rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px dashed #cccccc;
			border-radius: 8rpx;
			
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}

.anonymous-option {
	background: white;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 22rpx;
	}
	
	.anonymous-text {
		font-size: 30rpx;
		color: #212121;
	}
}

.submit-btn {
	width: 690rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #ff1e00;
	border-radius: 10rpx;
	font-size: 36rpx;
	color: white;
	margin: 36rpx 0 66rpx;
}
</style>